<template>
	<el-form :model="form" label-width="100px">
		<el-form-item label="标签名称"  >
		 	<el-input type="text" autocomplete="off"  style="width: 300px;" :model='form.name'></el-input>
		</el-form-item>
		<el-form-item label="图标图片">
		 	<el-upload class="avatar-uploader" action="" :on-change="changeUpload"  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
  				<img v-if="imageUrl" :src="imageUrl" class="avatar">
  				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>
		 <el-form-item >
    			<el-button type="primary" @click='create'>立即创建</el-button>
    			<el-button>取消</el-button>
  		</el-form-item>
	</el-form>	
</template>
<script>
	export default{
		name:'NewLabel',
		data(){
			return{
				form:{
					name:'',
					file:''
				},
				imageUrl:''
			}
		},
		 methods: {
	      handleAvatarSuccess(res, file) {
	        this.imageUrl = URL.createObjectURL(file.raw);
	      },
	      beforeAvatarUpload(file) {
	      
	        const isJPG = file.type === 'image/jpeg';
	        const isLt2M = file.size / 1024 / 1024 < 2;
	        this.file=file;
	        if (!isJPG) {
	          this.$message.error('上传头像图片只能是 JPG 格式!');
	        }
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 2MB!');
	        }
	        return isJPG && isLt2M;
	      },
	      changeUpload(file){
	      	let fd=new FormData();
	      	fd.append('file',file);
	      	console.log(fd);
	      	this.$http.post('/api/upload',fd).then(res=>{
	      		console.log(res.data)
	      	})
	      },
	      create(){
	      	let obj={
	      		name:this.name,
	      		file:this.file
	      	}
	      	
	      }
	     
    	}
	}
</script>
<style>
	.avatar-uploader .el-upload{
		border:1px solid #dcdfe6;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
  	}
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>